<template>

  <div :style="style">
    <slot></slot>
  </div>

</template>


<script setup name="Grid">

import {
  ref,
  watch,
  useSlots,
  computed,
  provide,
  onBeforeMount,
  onMounted,
  onUnmounted,
  onDeactivated,
  onActivated
} from "vue";

const props = defineProps({
  // 响应式布局展示
  cols: {
    default: () => ({xs: 1, sm: 2, md: 2, lg: 3, xl: 4})
  },
  // 是否折叠搜索项
  collapsed: {
    default: false
  },
  // 折叠后，显示的行数
  collapsedRows: {
    default: 1
  },
  // grid布局的间距，数字：20 ，或者 [20,10]
  gap: {
    default: 0
  }
})


onBeforeMount(() => props.collapsed && findIndex());
onMounted(() => {
  resize({target: {innerWidth: window.innerWidth}});
  window.addEventListener("resize", resize);
});
onActivated(() => {
  resize({target: {innerWidth: window.innerWidth}});
  window.addEventListener("resize", resize);
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
onDeactivated(() => {
  window.removeEventListener("resize", resize);
});

// 监听屏幕变化
const resize = (e) => {
  let width = (e.target).innerWidth;
  switch (!!width) {
    case width < 768:
      breakPoint.value = "xs";
      break;
    case width >= 768 && width < 992:
      breakPoint.value = "sm";
      break;
    case width >= 992 && width < 1200:
      breakPoint.value = "md";
      break;
    case width >= 1200 && width < 1920:
      breakPoint.value = "lg";
      break;
    case width >= 1920:
      breakPoint.value = "xl";
      break;
  }
};

// 注入 gap 间距
provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);

// 注入响应式断点
let breakPoint = ref("xl");
// provide("breakPoint", breakPoint);

// 注入要开始折叠的 index
const hiddenIndex = ref(-1);
provide("shouldHiddenIndex", hiddenIndex);


// 寻找需要开始折叠的字段 index
const slots = useSlots().default();
console.log(slots)

const findIndex = () => {
  let fields = []
  slots.forEach((slot)=>{

    console.log(slot.type)
    console.log(slot.type.name)
  })

}

// 注入 cols
const gridCols = computed(() => {
  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
  return props.cols;
});


// 设置grid布局的间距
const gridGap = computed(() => {
  if (typeof props.gap === "number") return `${props.gap}px`;
  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
  return "unset";
});

// 设置 style
// https://blog.csdn.net/qq_18798149/article/details/133872183?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170574016416800180642391%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170574016416800180642391&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3-133872183-null-null.142^v99^control&utm_term=grid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80%EF%BC%8C%E6%AF%94flex&spm=1018.2226.3001.4187

const style = computed(() => {
  return {
    display: "grid",
    // 设置统一间距
    gridGap: gridGap.value,
    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
  };
});

</script>

<style scoped lang="scss">

</style>
